<template>
  <div class="user-page">
    <div class="user-page-bg flex justify-start">
      <div class="flex items-center flex-col justify-end">
        <div class="cursor-pointer" @click="isOwnProfile ? editInfo() : null">
          <img
            v-if="userProfile?.avatar"
            :src="userProfile?.avatar"
            class="w-[80px] h-[80px] cursor-pointe rounded-full bg-gray-200"
            alt="" />
          <div class="flex items-center mt-[8px]" :class="{ 'cursor-pointer': isOwnProfile }">
            <span class="text-[#222] text-[24px] font-[600] mr-[8px]">
              {{ userProfile?.name }}
            </span>
            <svg
              v-svg-hover="{ hoverColor: '#222222' }"
              style="color: #7a7a7a"
              v-if="isOwnProfile"
              xmlns="http://www.w3.org/2000/svg"
              width="25"
              height="25"
              viewBox="0 0 25 25"
              fill="currentColor">
              <path
                d="M22.0597 2.99611C21.9912 2.92085 21.9081 2.86025 21.8156 2.81799C21.723 2.77573 21.6228 2.75267 21.5211 2.75022C21.4193 2.74777 21.3182 2.76596 21.2237 2.80371C21.1292 2.84147 21.0433 2.89798 20.9712 2.96986L20.3914 3.54689C20.3211 3.61721 20.2817 3.71255 20.2817 3.81197C20.2817 3.91138 20.3211 4.00673 20.3914 4.07704L20.923 4.60767C20.9578 4.64268 20.9992 4.67046 21.0448 4.68941C21.0905 4.70837 21.1394 4.71812 21.1887 4.71812C21.2381 4.71812 21.287 4.70837 21.3327 4.68941C21.3783 4.67046 21.4197 4.64268 21.4545 4.60767L22.0198 4.04517C22.3058 3.7597 22.3325 3.2947 22.0597 2.99611Z" />
              <path
                d="M19.2191 4.71876L10.7572 13.1656C10.7059 13.2167 10.6686 13.2802 10.6489 13.3499L10.2575 14.5156C10.2481 14.5473 10.2475 14.5808 10.2556 14.6128C10.2637 14.6448 10.2803 14.674 10.3036 14.6973C10.327 14.7207 10.3561 14.7373 10.3881 14.7454C10.4201 14.7535 10.4537 14.7528 10.4853 14.7435L11.6502 14.352C11.7198 14.3324 11.7833 14.2951 11.8344 14.2438L20.2812 5.78095C20.3594 5.70197 20.4032 5.59534 20.4032 5.48423C20.4032 5.37312 20.3594 5.2665 20.2812 5.18751L19.8148 4.71876C19.7358 4.6399 19.6286 4.59562 19.517 4.59562C19.4053 4.59562 19.2981 4.6399 19.2191 4.71876Z" />
              <path
                d="M18.6097 9.57783L12.8961 15.3027C12.6753 15.524 12.4039 15.6883 12.1053 15.7813L10.8912 16.1877C10.6031 16.269 10.2985 16.2721 10.0088 16.1966C9.7191 16.121 9.45477 15.9696 9.24307 15.7579C9.03136 15.5462 8.87994 15.2819 8.80439 14.9921C8.72885 14.7024 8.73191 14.3978 8.81328 14.1097L9.21969 12.8956C9.31238 12.5972 9.47631 12.3258 9.69734 12.1049L15.4222 6.39033C15.4747 6.33791 15.5104 6.27111 15.5249 6.19837C15.5394 6.12563 15.532 6.05022 15.5037 5.98168C15.4753 5.91314 15.4273 5.85455 15.3657 5.81331C15.304 5.77208 15.2315 5.75005 15.1573 5.75001H5.375C4.67881 5.75001 4.01113 6.02658 3.51884 6.51886C3.02656 7.01114 2.75 7.67882 2.75 8.37501V19.625C2.75 20.3212 3.02656 20.9889 3.51884 21.4812C4.01113 21.9735 4.67881 22.25 5.375 22.25H16.625C17.3212 22.25 17.9889 21.9735 18.4812 21.4812C18.9734 20.9889 19.25 20.3212 19.25 19.625V9.84267C19.25 9.7685 19.2279 9.696 19.1867 9.63435C19.1455 9.5727 19.0869 9.52467 19.0183 9.49632C18.9498 9.46797 18.8744 9.46058 18.8016 9.47509C18.7289 9.4896 18.6621 9.52535 18.6097 9.57783Z" />
            </svg>
          </div>
        </div>

        <div class="flex items-center mt-[16px]">
          <div
            class="flex flex-col items-center cursor-pointer user_info_item"
            @click="handleFollow('follow')">
            <p class="text-[#222] text-[16px] font-[600]">
              {{ followCount }}
            </p>
            <p class="text-[#7A7A7A] text-[16px]">Following</p>
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="2"
            height="38"
            viewBox="0 0 2 38"
            fill="none">
            <path d="M1 0V38" stroke="#E1E2E3" />
          </svg>
          <div
            class="flex flex-col items-center cursor-pointer user_info_item"
            @click="handleFollow('fans')">
            <p class="text-[#222] text-[16px] font-[600]">
              {{ fansCount }}
            </p>
            <p class="text-[#7A7A7A] text-[16px]">Fans</p>
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="2"
            height="38"
            viewBox="0 0 2 38"
            fill="none">
            <path d="M1 0V38" stroke="#E1E2E3" />
          </svg>
          <div class="flex flex-col items-center user_info_item">
            <p class="text-[#222] text-[16px] font-[600]">
              {{ userProfile?.u_counter?.liked_count }}
            </p>
            <p class="text-[#7A7A7A] text-[16px]">Liked</p>
          </div>
        </div>
      </div>

      <div class="flex items-end">
        <div v-if="!isOwnProfile" class="mr-[20px] mb-[4px]">
          <div
            v-if="[1, 2].includes(userProfile?.follow_flag || 0)"
            v-hover-bg="{
              enterColor: '#F9D9C7',
              leaveColor: '#fbe6db',
            }"
            class="base_button_ing"
            @click="handleFollowUser(0)">
            {{ userProfile?.follow_flag === 1 ? 'Following' : 'Friends' }}
          </div>
          <div v-hover-bg v-else class="base_button" @click="handleFollowUser(1)">Follow</div>
        </div>

        <div
          class="p-[6px] mb-[6px] rounded-[4px] cursor-pointer copy_url_view"
          @click="handleCopyUrl">
          <el-tooltip class="box-item" effect="dark" content="Copy" placement="top">
            <svg
              v-svg-hover="{ hoverColor: '#222222' }"
              style="color: #7a7a7a"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="currentColor">
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.90147 13.3264C5.26854 13.9593 4.91296 14.8178 4.91296 15.7129C4.91296 16.608 5.26854 17.4664 5.90147 18.0994C6.53441 18.7323 7.39285 19.0879 8.28796 19.0879C9.18307 19.0879 10.0415 18.7323 10.6744 18.0994L12.5525 16.2213C12.9918 15.782 13.7041 15.782 14.1435 16.2213C14.5828 16.6607 14.5828 17.373 14.1435 17.8123L12.2654 19.6904C11.2105 20.7453 9.7798 21.3379 8.28796 21.3379C6.79612 21.3379 5.36538 20.7453 4.31048 19.6904C3.25559 18.6355 2.66296 17.2047 2.66296 15.7129C2.66296 14.221 3.25559 12.7903 4.31048 11.7354L6.14708 9.89882C6.58642 9.45948 7.29873 9.45948 7.73807 9.89882C8.17741 10.3382 8.17741 11.0505 7.73807 11.4898L5.90147 13.3264ZM9.89851 7.73838C9.45917 7.29904 9.45917 6.58673 9.89851 6.14739L11.7351 4.31079C12.79 3.2559 14.2207 2.66327 15.7126 2.66327C17.2044 2.66327 18.6352 3.2559 19.6901 4.31079C20.7449 5.36569 21.3376 6.79643 21.3376 8.28827C21.3376 9.78011 20.7449 11.2109 19.6901 12.2657L17.812 14.1438C17.3727 14.5831 16.6604 14.5831 16.221 14.1438C15.7817 13.7044 15.7817 12.9921 16.221 12.5528L18.0991 10.6748C18.732 10.0418 19.0876 9.18337 19.0876 8.28827C19.0876 7.39316 18.732 6.53472 18.0991 5.90178C17.4661 5.26885 16.6077 4.91327 15.7126 4.91327C14.8175 4.91327 13.959 5.26885 13.3261 5.90178L11.4895 7.73838C11.0502 8.17772 10.3378 8.17772 9.89851 7.73838ZM8.32343 15.6774C7.88408 15.2381 7.88408 14.5258 8.32343 14.0864L14.1524 8.25744C14.5918 7.8181 15.3041 7.8181 15.7434 8.25744C16.1827 8.69678 16.1827 9.4091 15.7434 9.84843L9.91442 15.6774C9.47508 16.1168 8.76277 16.1168 8.32343 15.6774Z" />
            </svg>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
  <!-- 用户模块数据 -->
  <div class="bg-[#f8f8f8]">
    <div
      ref="stickyRef"
      :class="[isSticky ? 'flex_sticky' : '']"
      class="px-[24px] pt-[17px] sticky top-0 z-10 py-2 transition-all duration-300 z-[500]">
      <div :class="[isSticky && 'tabs_sticky']" class="flex items-center text-[15px] gap-[40px]">
        <div
          :class="activeTab === 'posts' ? 'base_active_tab_item' : 'base_tab_item'"
          @click="handleTabChange('posts')">
          Posts ({{ formatNumber(userProfile?.u_counter?.posts_count || 0) }})
        </div>
        <div
          :class="activeTab === 'likes' ? 'base_active_tab_item' : 'base_tab_item'"
          @click="handleTabChange('likes')">
          Likes ({{ formatNumber(userProfile?.u_counter?.likes_count || 0) }})
        </div>
        <div
          :class="activeTab === 'nex' ? 'base_active_tab_item' : 'base_tab_item'"
          @click="handleTabChange('nex')">
          Nex ({{ formatNumber(userProfile?.u_counter?.nex_count || 0) }})
        </div>
        <div
          :class="activeTab === 'arcade' ? 'base_active_tab_item' : 'base_tab_item'"
          @click="handleTabChange('arcade')">
          Arcade
        </div>
      </div>
      <div
        v-if="activeTab === 'arcade'"
        class="nex_list gap-[40px]"
        :class="[!isSticky && 'mt-[24px]']">
        <div
          @click="changeArcadeTab(item.value)"
          :class="[
            item.value === activeArcadeChildTab ? 'active_nex_item' : 'nex_item',
            'cursor_poi base_tab_text_hover_color',
          ]"
          v-for="item in ArcadeChildTabs"
          :key="item.value">
          {{ item.name }}
        </div>
      </div>
      <div
        v-if="activeTab === 'nex'"
        class="nex_list gap-[40px]"
        :class="[!isSticky && 'mt-[24px]']">
        <div
          @click="changeNexTab(item.value)"
          :class="[
            item.value === activeNexChildTab ? 'active_nex_item' : 'nex_item',
            'cursor_poi base_tab_text_hover_color',
          ]"
          v-for="item in NexChildTabs"
          :key="item.value">
          {{ item.name }}
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" :show-close="false" width="512">
      <div class="edit_view">
        <div class="center_view">
          <el-upload
            class="upload-el"
            :show-file-list="false"
            :file-list="fileList"
            :http-request="handleCustomUpload"
            :before-upload="beforeUpload"
            accept="image/*">
            <div class="avt_view">
              <block v-if="editUserInfo.avatar">
                <img class="avt_img rounded-full" :src="editUserInfo.avatar" alt="" />
              </block>
              <svg
                v-else
                xmlns="http://www.w3.org/2000/svg"
                width="80"
                height="80"
                viewBox="0 0 80 80"
                fill="none">
                <circle cx="40" cy="40" r="40" fill="black" fill-opacity="0.4" />
              </svg>
              <svg
                class="avt_icon"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none">
                <path
                  d="M12 15.75C13.6569 15.75 15 14.4069 15 12.75C15 11.0931 13.6569 9.75 12 9.75C10.3431 9.75 9 11.0931 9 12.75C9 14.4069 10.3431 15.75 12 15.75Z"
                  fill="#E1E2E3" />
                <path
                  d="M20.25 6.75H17.4844C17.3438 6.75 17.1694 6.65906 17.0334 6.51562L15.8175 4.59656C15.7983 4.56611 15.7768 4.53712 15.7533 4.50984C15.3333 4.02 14.7656 3.75 14.1562 3.75H9.84375C9.23438 3.75 8.66672 4.02 8.24672 4.50984C8.2232 4.53712 8.20173 4.56611 8.1825 4.59656L6.96656 6.51844C6.8625 6.63187 6.71625 6.75281 6.5625 6.75281V6.37781C6.5625 6.1789 6.48348 5.98813 6.34283 5.84748C6.20218 5.70683 6.01141 5.62781 5.8125 5.62781H4.6875C4.48859 5.62781 4.29782 5.70683 4.15717 5.84748C4.01652 5.98813 3.9375 6.1789 3.9375 6.37781V6.75281H3.75C3.15345 6.75343 2.58152 6.99069 2.1597 7.41251C1.73787 7.83433 1.50062 8.40627 1.5 9.00281V18C1.50062 18.5965 1.73787 19.1685 2.1597 19.5903C2.58152 20.0121 3.15345 20.2494 3.75 20.25H20.25C20.8465 20.2494 21.4185 20.0121 21.8403 19.5903C22.2621 19.1685 22.4994 18.5965 22.5 18V9C22.4994 8.40345 22.2621 7.83152 21.8403 7.40969C21.4185 6.98787 20.8465 6.75062 20.25 6.75ZM12 17.25C11.11 17.25 10.24 16.9861 9.49993 16.4916C8.75991 15.9971 8.18314 15.2943 7.84254 14.4721C7.50195 13.6498 7.41283 12.745 7.58647 11.8721C7.7601 10.9992 8.18868 10.1974 8.81802 9.56802C9.44736 8.93868 10.2492 8.5101 11.1221 8.33647C11.995 8.16283 12.8998 8.25195 13.7221 8.59254C14.5443 8.93314 15.2471 9.50991 15.7416 10.2499C16.2361 10.99 16.5 11.86 16.5 12.75C16.4986 13.9431 16.0241 15.0869 15.1805 15.9305C14.3369 16.7741 13.1931 17.2486 12 17.25Z"
                  fill="#E1E2E3" />
              </svg>
            </div>
          </el-upload>
        </div>
        <div class="avt_des center_view">Click to change the profile picture.</div>
        <div class="line_view"></div>
        <div>
          <div class="user_name">User Name</div>
          <input maxlength="30" class="input_view" v-model="editUserInfo.name" />
        </div>
        <div class="flex_row">
          <div class="cancle_btn cursor_poi" @click="dialogVisible = false">Cancel</div>
          <div class="confirm_btn cursor_poi" v-hover-gradient @click="confirmEdit">Confirm</div>
        </div>
      </div>
    </el-dialog>

    <!-- Tab内容区域 -->
    <PostsTab v-if="activeTab === 'posts' && currentUserId" :uid="currentUserId" />
    <LikesTab v-if="activeTab === 'likes' && currentUserId" :uid="currentUserId" />
    <NexTab
      v-if="activeTab === 'nex' && currentUserId"
      ref="nexTabRef"
      :uid="currentUserId"
      :activeNexChildTab="activeNexChildTab" />
    <ArcadeTab
      v-if="activeTab === 'arcade' && currentUserId"
      ref="arcadeTabRef"
      :uid="currentUserId"
      :activeArcadeTab="activeArcadeChildTab" />
    <!-- 喜欢关注弹窗 -->
    <FollowModal
      v-if="currentUserId"
      :showFollowModal="showFollowModal"
      :followCount="followCount"
      :fansCount="fansCount"
      :uid="currentUserId"
      :followType="followType"
      @followTypeChange="handleFollowTypeChange"
      @close="showFollowModal = false"
      @updateDataCount="getUserProfile" />

    <VoteDialog v-if="dialogStore.showVoteDialog" />
  </div>
</template>

<script setup lang="ts">
  import { UserAPI } from '@/api/user';
  import { useUserStore } from '@/store/user';
  import { User } from '@/types/api';
  import { computed, ref, watch, onMounted, nextTick, onActivated } from 'vue';
  import { useRoute } from 'vue-router';
  import PostsTab from './components/PostsTab.vue';
  import LikesTab from './components/LikesTab.vue';
  import ArcadeTab from './components/ArcadeTab.vue';
  import NexTab from './components/NexTab.vue';
  import { ElMessage, UploadFile, UploadRawFile } from 'element-plus';
  import { BaseAPI } from '@/api/base';
  import FollowModal from './components/FollowModal.vue';
  import { useSticky } from '@/hook/useSticky';
  import { ArcadeTabsEM } from '@/types/activity';
  import VoteDialog from '@/views/contest/VoteDialog.vue';
  import { compressImage, formatNum } from '@/utils/tools';
  import { NexTabsEM } from '@/api/nex';
  import { useDialogStore } from '@/store/dialog';
  // 定义组件名称，用于keep-alive缓存
  defineOptions({
    name: 'Profile',
  });
  const stickyRef = ref<any>(null);
  const isSticky = useSticky(stickyRef);
  const userStore = useUserStore();
  const route = useRoute();
  const dialogStore = useDialogStore();
  const userInfo = computed(() => userStore.user);
  const nowPageUserId = ref<any>(''); // 当前页面uid，处理页面离开时候computed currentUserId还在计算
  // 获取当前要显示的用户uid（query参数优先，否则使用当前登录用户）
  const currentUserId = computed(() => {
    const queryUid = route.query?.uid;
    if (route.path !== '/profile') {
      return nowPageUserId.value;
    }
    if (queryUid && typeof queryUid === 'string') {
      return queryUid; // 保持为字符串，避免精度丢失
    }
    return userInfo.value?.uid;
  });

  // 判断是否是自己的主页
  const isOwnProfile = computed(() => {
    return String(currentUserId.value) === String(userInfo.value?.uid);
  });
  const userProfile = ref<User | null>(null);
  const dialogVisible = ref<boolean>(false);
  const editUserInfo = ref<any>({
    avatar: null,
    name: null,
  });
  const fileList = ref<UploadFile[]>([]);

  // 响应式计数管理
  const followCount = ref(0);
  const fansCount = ref(0);

  // Tab状态管理
  const activeTab = ref<'posts' | 'likes' | 'nex' | 'arcade'>('posts');

  const showFollowModal = ref(false);
  const followType = ref<'follow' | 'fans' | null>(null);

  const ArcadeChildTabs = ref<any>([
    { value: 'Designs', name: `Designs` },
    { value: 'Voted', name: `Voted` },
    { value: 'History', name: `History Statics` },
  ]);
  const activeArcadeChildTab = ref<ArcadeTabsEM>('Designs');
  const arcadeTabRef: any = ref(null);

  const NexChildTabs = ref<any>([{ value: 'by' }, { value: 'on' }]);
  const activeNexChildTab = ref<NexTabsEM>('by');
  const nexTabRef: any = ref(null);

  // 切换NexTab子集tab
  const changeNexTab = (type: NexTabsEM) => {
    activeNexChildTab.value = type;
    nexTabRef.value.refresh(type);
  };

  // 切换ArcadeTab子级tab
  const changeArcadeTab = (type: ArcadeTabsEM) => {
    activeArcadeChildTab.value = type;
    if (type !== 'History') {
      nextTick(arcadeTabRef.value.refresh(type));
    }
  };

  const handleFollowUser = async (type: number) => {
    if (type == 1) {
      await UserAPI.followUser({ to_id: currentUserId.value as any });
    } else {
      await UserAPI.unfollowUser({ to_id: currentUserId.value as any });
    }
    userProfile.value!.follow_flag = type == 1 ? 1 : 0;
  };

  // 自定义上传方法
  const handleCustomUpload = async (options: any) => {
    const { file, onSuccess, onError } = options;
    const compressedFile: any = await compressImage(file, 0.5);
    // 调用实际的文件上传接口
    const { code, data } = (await BaseAPI.uploadFile(compressedFile)) || {};
    try {
      if (code === 200) {
        editUserInfo.value.avatar = data?.url;
      }
    } catch (e) {
      ElMessage.error('upload-error');
    } finally {
    }
    console.log(999);
  };
  // 文件上传前的验证方法
  const beforeUpload = (file: UploadRawFile) => {
    // 定义最大文件大小 (5MB)
    const maxSize = 5 * 1024 * 1024;
    // 检查文件大小
    if (file.size && file.size > maxSize) {
      ElMessage.error('The image size exceeds 5MB and cannot be uploaded.');
      return false;
    }
    // 验证通过，继续上传
    return true;
  };

  // 数值格式化函数
  const formatNumber = (num: number): string => {
    if (num >= 1000000) {
      return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
      return (num / 1000).toFixed(1) + 'k';
    } else {
      return num.toString();
    }
  };

  // Tab切换处理
  const handleTabChange = (tab: 'posts' | 'likes' | 'arcade' | 'nex') => {
    activeTab.value = tab;
    console.log('切换到tab:', tab);
  };

  const handleFollowTypeChange = (type: 'follow' | 'fans' | null) => {
    followType.value = type;
  };

  const getUserProfile = async () => {
    if (!currentUserId.value) {
      console.error('无法获取用户ID');
      return;
    }

    // 直接传递uid，让后端处理大数字
    const res = await UserAPI.getUserProfile({ uid: currentUserId.value as any });
    console.log('获取用户资料:', res);
    userProfile.value = res.data as any;

    // 初始化计数
    followCount.value = userProfile.value?.u_counter?.followings_count || 0;
    fansCount.value = userProfile.value?.u_counter?.fans_count || 0;
    setArcadeChildTabs();
  };

  const setArcadeChildTabs = () => {
    ArcadeChildTabs.value?.forEach((item: any) => {
      if (item.name === 'Designs') {
        item.name = `Designs (${formatNumber(userProfile.value?.u_counter?.design_count || 0)})`;
      } else if (item.name === 'Voted') {
        item.name = `Voted (${formatNumber(userProfile.value?.u_counter?.vote_count || 0)})`;
      }
    });
    NexChildTabs.value?.forEach((item: any) => {
      if (item.value === 'by') {
        item.name = `Nex Creator Joined (${formatNum(
          userProfile.value?.u_counter?.nex_by_me_count || 0
        )})`;
      } else if (item.value === 'on') {
        item.name = `Nex On Creator's Design (${formatNum(
          userProfile.value?.u_counter?.nex_on_me_count || 0
        )})`;
      }
    });
  };

  // 更新关注计数
  const updateFollowCount = (count: number) => {
    followCount.value = count;
    // 同时更新userProfile中的数据
    if (userProfile.value?.u_counter) {
      userProfile.value.u_counter.followings_count = count;
    }
  };

  // 更新粉丝计数
  const updateFansCount = (count: number) => {
    fansCount.value = count;
    // 同时更新userProfile中的数据
    if (userProfile.value?.u_counter) {
      userProfile.value.u_counter.fans_count = count;
    }
  };

  // 监听用户信息变化
  watch(
    () => userInfo.value?.uid,
    (newVal) => {
      if (newVal) {
        getUserProfile();
      }
    }
  );

  // 监听当前用户ID变化（路由参数变化）
  watch(currentUserId, () => {
    nowPageUserId.value = currentUserId.value;
    if (currentUserId.value) {
      getUserProfile();
    }
  });

  // 组件挂载时加载数据
  onMounted(() => {});

  onActivated(() => {
    userProfile.value = null;
    if (currentUserId.value) {
      getUserProfile();
    }
  });

  const handleFollow = (type: 'follow' | 'fans') => {
    console.log('handleFollow==', type);
    // showFollowModal.value = true;
    // followType.value = type;
    nextTick(() => {
      followType.value = type;
      showFollowModal.value = true;
    });
  };

  const editInfo = () => {
    editUserInfo.value.name = userProfile.value?.name;
    editUserInfo.value.avatar = userProfile.value?.avatar;
    dialogVisible.value = true;
  };

  const confirmEdit = async () => {
    const { name, avatar } = editUserInfo.value;
    if (!name || !avatar) {
      ElMessage.warning('Please enter user name and upload avatar');
      return;
    }
    const params = {
      name,
      avatar,
    };
    await UserAPI.updateUserProfile(params);
    userStore.updateUserInfo(params);
    getUserProfile();
    dialogVisible.value = false;
  };

  const handleCopyUrl = () => {
    const { uid } = route.query;
    let link = window.location.href;
    if (!uid) {
      const userUid = userInfo.value?.uid;
      link = link.includes('?') ? `${link}&uid=${userUid}` : `${link}?&uid=${userUid}`;
    }
    navigator.clipboard.writeText(link);
    ElMessage.success('Copied to clipboard');
  };
</script>

<style lang="scss" scoped>
  .flex_sticky {
    justify-content: center;
    background: #fff;
  }
  .tabs_sticky {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 19px;
  }
  .nex_list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .nex_item {
    color: var(---6, #7a7a7a);

    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .active-tabs {
    border-bottom: 2px solid var(---, #f76b1b);
  }
  .no_active-tabs {
    border-bottom: 2px solid transparent;
  }
  .active_nex_item {
    color: var(---9, #222);

    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .edit_view {
    padding: 24px;
  }
  .line_view {
    height: 1px;
    width: 100%;
    background: #e1e2e3;
    margin: 16px 0;
  }
  .center_view {
    display: flex;
    align-items: center;
    justify-content: center;
    .avt_view {
      position: relative;
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid #e1e2e3;
    }
    .avt_img {
      width: 80px;
      height: 80px;
      //object-fit: cover;
    }
    .avt_icon {
      position: absolute;
      top: 28px;
      left: 28px;
    }
  }
  .user_name {
    color: var(---9, #0a0a0a);

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .flex_row {
    display: flex;
    flex-direction: row;
    padding-top: 40px;
    justify-content: space-between;
  }
  .cursor_poi {
    cursor: pointer;
  }
  .cancle_btn {
    border-radius: 8px;
    background: var(---2, #ededed);
    backdrop-filter: blur(2px);
    display: flex;
    height: 48px;
    width: 205px;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .confirm_btn {
    display: flex;
    height: 48px;
    width: 205px;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
    backdrop-filter: blur(2px);
    color: var(---0, #fff);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .input_view {
    width: 100%;
    border-radius: 8px;
    text-align: left;
    margin-top: 4px;
    color: var(---9, #222);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 14px;
    background: #f4f5f7;
    border: none;
    outline: none;
  }
  .avt_des {
    color: var(---9, #222);
    text-align: center;

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .user-page {
    width: 100%;
    height: 240px;
    background-image: url('@/assets/user/user_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .user-page-bg {
    width: 100%;
    height: 100%;
    padding: 0 120px;
    padding-bottom: 30px;
    background: linear-gradient(90deg, #fff 29.81%, rgba(255, 255, 255, 0.6) 100%);
  }

  .line {
    height: 1px;
    margin: 0 16px;
    transition: all 0.3s ease;

    &.active {
      background: #f76b1b;
      height: 1px;
    }
  }

  .tab-content {
    min-height: 400px;
    padding: 24px 120px;
    background: #f9fafb;
  }
  .user_info_item {
    width: 104px;
  }
  .copy_url_view {
    background: #ededed;
  }
  .copy_url_view:hover {
    background: #e1e2e3;
  }
</style>
